<template>
  <div class="blog-articles">
    <a-row :gutter="20">
      <a-col :xs="24" :sm="12" :md="8" v-for="(article, index) in displayedArticles" :key="index">
        <div class="article-card">
          <a-image @click="showBlogDetail(article)" :src="article.thumbnail" :alt="article.title" class="article-image" />
          <div class="article-info">
            <div class="article-category" @click="showBlogDetail(article)">{{ article.category.name }}</div>
            <div class="article-title">{{ article.title }}</div>
            <p class="article-desc">{{ article.excerpt }}</p>
            <div class="time-wrapper">
              <span class="dot"></span>
              <span class="time">{{ article.published_at }}</span>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
    <div class="view-more-wrapper" v-if="hasMore">
      <a-button class="view-more-btn" @click="loadMore">View more</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, defineComponent } from 'vue'
import type { PropType } from 'vue'
const emit = defineEmits(['showBlogDetail'])
interface Article {
  category: {
    name: string
  }
  title: string
  excerpt: string
  published_at: string
  thumbnail: string
}

interface ArticleList {
  list: Article[]
}

const props = defineProps({
  allList: {
    type: Array as PropType<ArticleList[]>,
    default: () => []
  }
})

// 每页显示的文章数量
const pageSize = 6
// 当前页码
const currentPage = ref(1)

// 计算当前显示的文章
const displayedArticles = computed(() => {
  if (!props.allList || !props.allList.length || !props.allList[0].list) {
    return [];
  }
  return props.allList[0].list.slice(0, currentPage.value * pageSize)
})

// 判断是否还有更多文章
const hasMore = computed(() => {
  if (!props.allList || !props.allList.length || !props.allList[0].list) {
    return false;
  }
  return displayedArticles.value.length < props.allList[0].list.length
})

// 加载更多文章
const loadMore = () => {
  currentPage.value++
}
const showBlogDetail = (article: Article) => {
  emit('showBlogDetail', article)
}
</script>

<script lang="ts">
// 添加默认导出以解决导入问题
export default defineComponent({
  name: 'BlogArticles'
})
</script>

<style scoped>
.blog-articles {
  margin-top: 40px;
}

.article-card {
  margin-bottom: 30px;
  transition: all 0.3s ease;
}

.article-image {
  width: 100%;
  height: 530px;
  object-fit: cover;
}

.article-info {
  padding: 14px 0;
  line-height: 1.2;
}

.article-category {
  font-size: 18px;
  color: #333;
  margin-bottom: 8px;
  text-transform: uppercase;
  cursor: pointer;
}

.article-title {
  font-size: 16px;
  font-weight: 600;
  margin: 8px 0;
  line-height: 1.3;
}

.article-desc {
  font-size: 13px;
  color: #333;
  font-weight: 700;
  margin: 8px 0;
  line-height: 1.3;
}

.time-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.dot {
  width: 8px;
  height: 8px;
  background-color: #999;
  border-radius: 50%;
}

.time {
  font-size: 16px;
  color: #999;
}

.view-more-wrapper {
  display: flex;
  justify-content: center;
  margin: 20px 0 40px;
}

.view-more-btn {
  height: 52px;
  line-height: 52px;
  padding: 0 50px;
  background-color: #000;
  color: #fff;
  font-weight: 600;
  font-size: 18px;
  cursor: pointer;
  text-align: center;
  border: none;
  border-radius: 0;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .blog-articles {
    margin-top: 20px;
  }
  
  .article-card {
    margin-bottom: 20px;
  }
  
  .article-image {
    height: 300px;
  }
  
  .article-info {
    padding: 10px 0;
  }
  
  .article-category {
    font-size: 14px;
    margin-bottom: 6px;
  }
  
  .article-title {
    font-size: 14px;
    margin: 6px 0;
  }
  
  .article-desc {
    font-size: 12px;
    margin: 6px 0;
  }
  
  .time {
    font-size: 12px;
  }
  
  .view-more-btn {
    height: 40px;
    line-height: 40px;
    padding: 0 30px;
    font-size: 16px;
  }
}

/* 平板适配 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .article-image {
    height: 400px;
  }
  
  .article-category {
    font-size: 16px;
  }
  
  .article-title {
    font-size: 15px;
  }
  
  .article-desc {
    font-size: 12px;
  }
}
</style> 